import React, { PureComponent } from "react";
import { NavLink, Route, Switch } from "react-router-dom";
import { renderRoutes, matchRoutes } from "react-router-config";


class About extends PureComponent {
  render() {
    console.log(this.props.route);
    const branch = matchRoutes(this.props.route.routes, "/about");
    console.log(branch);

    return (
      <div>
        <NavLink exact to="/about" activeClassName="about-active">
          企业历史
        </NavLink>
        <NavLink exact to="/about/culture" activeClassName="about-active">
          企业文化
        </NavLink>
        <NavLink exact to="/about/contact" activeClassName="about-active">
          联系我们
        </NavLink>

        <button onClick={(e) => this.btnJion()}>加入我们</button>

        {/* <Switch>
          <Route exact path="/about">
            <AboutHistory />
          </Route>
          <Route exact path="/about/culture">
            <AboutCulture />
          </Route>
          <Route exact path="/about/contact">
            <AboutContact />
          </Route>

          <Route exact path="/about/join">
            <AboutJoin />
          </Route>
        </Switch> */}

        {renderRoutes(this.props.route.routes)}
      </div>
    );
  }
  btnJion() {
    // console.log(this.props.history);
    // console.log(this.props.location);
    // console.log(this.props.match);

    this.props.history.push("/about/join");
  }
}

export function AboutHistory(props) {
  return <h2>企业成立于 2000年，拥有悠久的历史文化</h2>;
}

export function AboutCulture(props) {
  return <h2>创新/发展/共赢</h2>;
}

export function AboutContact(props) {
  return <h2>联系电话: 68888888</h2>;
}

export function AboutJoin(props) {
  return <h2>投递简历到aaaa@123. com</h2>;
}

export default About;
